<template>
  <view class="viewport" :class="seeMode">
    <!-- 自定义顶部导航 -->
    <!-- #ifndef MP-TOUTIAO -->
    <uni-nav-bar class="nav-bar" :background-color="nvaBackgroundColor" :border="false" :statusBar="true"
      @clickLeft="goBack">
      <template #left>
        <text class="txt icon-arrow-left" :class="seeMode"></text>
      </template>
      <template #default>
        <view class="mode-switchs" :class="seeMode">
          <view class="switch-item" :class="{ active: modeActive == 1 }" @tap="changeMode(1)">答题模式</view>
          <view class="switch-item" :class="{ active: modeActive == 2 }" @tap="changeMode(2)">背题模式</view>
        </view>
      </template>
      <!-- #ifndef MP-->
      <template #right>
        <text class="txt" :class="seeMode" @tap="openAnswerSettingPopup">设置</text>
      </template>
      <!-- #endif -->
    </uni-nav-bar>
    <!-- #endif -->
    <!-- 抖音小程序顶部导航 -->
    <!-- #ifdef MP-TOUTIAO -->
    <view class="custom-nav-bar" :class="seeMode">
      <view class="status-bar"></view>
      <view class="title-container">
        <view class="title-text">顺序练习</view>
      </view>
    </view>
    <!-- #endif -->
    <!-- 答题swiper -->
    <UFastAnswerSwiper class="answer-swiper" ref="answerSwiperRef" :list="questions!" :topic-index="currentIndex"
      @changeTopic="changeTopic">
      <template #default="{ item, index }">
        <!-- 主体 -->
        <scroll-view :scroll-y="true" :show-scrollbar="false" :enhanced="true" class="main-container">
          <!-- 答题 -->
          <view class="answer">
            <!-- 答题-ID -->
            <view class="answer-id">
              {{ item.questionId }}
            </view>
            <!-- 答题-题目 -->
            <view class="answer-topic">
              <!-- 答题-题目-选项类型 -->
              <text class="answer-topic-option-type" :class="seeMode">{{ answerOptionTypeLable(item) }}</text>
              <!-- 答题-题目-新规题 -->
              <text class="answer-topic-new-role" :class="seeMode"
                v-if="useTopicIsNewRule(baseType!, item.questionId!)">新规题</text>
              <!-- 答题-题目-新规题 -->
              <text class="answer-topic-locate" :class="seeMode"
                v-if="useTopicIsLocate(baseType!, item.classesCode!)">本市考题</text>
              <!-- 答题-题目-内容 -->
              <text class="answer-topic-content">
                {{ item.question }}
              </text>
              <!-- 答题-题目-读题 -->
              <text class="answer-topic-sound-play-btn " :class="seeMode" @tap="soundPlay(item.questionId!, 'topic')">
                <text class="btn-icon icon-sound">
                  <text v-if="answerTopicSound(item.questionId!)" class='btn-play' :class="seeMode"></text>
                </text>
                <text class="btn-txt">
                  {{ answerTopicSound(item.questionId!) ? answerTopicSound(item.questionId!)?.playTxt : '读题' }}
                </text>
              </text>
            </view>
            <!-- 答题-图片 等媒体资源 -->
            <view class="answer-media" v-if="item.mediaContent">
              <image class="media-img" :src="item.mediaContent" mode="heightFix" @tap="previewImg(item)"></image>
            </view>
            <!-- 答题-选项 -->
            <view class="answer-options" :class="seeMode">
              <view class="item" :class="option.className" :hover-class="option.hoveClass"
                v-for="(option, optionIndex) in answerOptonList(item)" :key="optionIndex"
                @tap="makeChoice(item, optionIndex)">
                <view :class="option.iconClass">{{ option.name }}</view>
                <view class="content">
                  {{ option.content }}
                </view>
              </view>
            </view>
            <!-- 答题-确认答案 -->
            <view class="answer-confirm" :class="seeMode"
              v-if="item.optionType === AnswerOptionTypeEnum.Multiple && !getAnswerItem(item.questionId!)?.answer && modeActive != 2"
              @tap="confirm(item)">
              确认答案
            </view>
            <!-- 答题-结果 -->
            <view class="answer-result" :class="seeMode" v-if="isAnswerOrLearn(item.questionId!)">
              <!-- 答题-试题答案 -->
              <view class="answer-result-item">
                <text class="answer-correct-label" :class="seeMode">答案：</text>
                <text class="answer-correct-value" :class="seeMode">
                  {{ item.success == 'Y' ? 'A' : item.success == 'N' ? 'B' : item.success }}</text>
              </view>
              <!-- 答题-您选择的答案 -->
              <view class="answer-result-item"
                v-if="modeActive == 1 && getAnswerItem(item.questionId!)?.answer != undefined && getAnswerItem(item.questionId!)?.answer != item.success">
                <text class="answer-user-label" :class="seeMode">您选择的：</text>
                <text class="answer-user-value" :class="seeMode">
                  {{ getAnswerItem(item.questionId!)?.answer == 'Y' ? 'A' : getAnswerItem(item.questionId!)?.answer ==
                    'N' ? 'B' : getAnswerItem(item.questionId!)?.answer }}
                </text>
              </view>
              <!-- 答题-本地重做 -->
              <view class="answer-redo-container"
                v-if="modeActive == 1 && getAnswerItem(item.questionId!)?.answer != undefined && getAnswerItem(item.questionId!)?.answer != item.success">
                <!--  答题-重做按钮 -->
                <view class="answer-redo" :class="seeMode" @tap="answerRedo(item)">本题重做</view>
              </view>
            </view>

          </view>
          <!-- 页面-灰色分割线 -->
          <view class="page-gray-border" :class="seeMode" v-if="isAnswerOrLearn(item.questionId!) && item.knackDetail">
          </view>
          <!-- 答题-技巧 -->
          <view class="answer-skill" :class="seeMode" v-if="isAnswerOrLearn(item.questionId!) && item.knackDetail">
            <!-- 技巧-标题 -->
            <view class="answer-skill-title">
              <!-- 技巧-标题-左边 -->
              <view class="answer-skill-title-left">本题技巧</view>
              <!-- 技巧-标题-右边 -->
              <view class="answer-skill-title-right" v-if="getQuestionOtherInfo(item.questionId!)?.knackVoiceUrl">
                <!-- 答题-技巧-语音 -->
                <text class="sound-play-btn" :class="seeMode" @tap="soundPlay(item.questionId!, 'skill')">
                  <text class="btn-icon icon-sound">
                    <text class='btn-play' v-if="answerSkillSound(item.questionId!)" :class="seeMode"></text>
                  </text>
                  <text class="btn-txt">
                    {{ answerSkillSound(item.questionId!) ? answerSkillSound(item.questionId!)?.playTxt : '技巧语音' }}
                  </text>
                </text>
              </view>
            </view>
            <!-- 答题-技巧-内容 -->
            <view class="answer-skill-content" v-if="item.knackDetail">
              <rich-text :nodes="item.knackDetail"></rich-text>
            </view>
            <!--技巧-适用于 -->
            <view class="answer-skill-sy" @tap="toTopicSkillExercise(item.knackQuestions!)"
              v-if="item.knackQuestions && Array.isArray(item.knackQuestions) && item.knackQuestions.length > 1">
              <!-- 技巧-适用于-试题数量 -->
              <text>适用于<text class="answer-skill-sy-count" :class="seeMode">{{ item.knackQuestions.length
                  }}</text>道题</text>
              <!-- 技巧-适用于-右箭头图标 -->
              <uni-icons class="answer-skill-sy-icon" type="right" color="rgb(92, 92, 92)" size="16"></uni-icons>
            </view>
            <!-- 答题-技巧-解析 -->
            <view class="answer-skill-explain" :class="seeMode" v-if="item.conciseExplain">
              {{ item.conciseExplain }}
              <!-- 答题-技巧-解析-语音 -->
              <text class="sound-play-btn" @tap="soundPlay(item.questionId!, 'skill-explain')">
                <text class="btn-icon icon-sound" :class="seeMode">
                  <text v-if="answerSkillExplainSound(item.questionId!)" class='btn-play' :class="seeMode"></text>
                </text>
              </text>
            </view>

          </view>
          <!-- 页面-灰色分割线 -->
          <view class="page-gray-border" :class="seeMode"
            v-if="isAnswerOrLearn(item.questionId!) && getQuestionOtherInfo(item.questionId!)?.videoCoverUrl"></view>
          <!-- 答题-视频讲题 -->
          <view class='answer-video-explain'
            v-if="isAnswerOrLearn(item.questionId!) && getQuestionOtherInfo(item.questionId!)?.videoCoverUrl">
            <!-- 答题-视频讲解-标题 -->
            <view class="answer-video-explain-title" :class="seeMode">
              视频讲题
            </view>
            <!-- 答题-视频讲解-内容 -->
            <view class="answer-video-explain-content">
              <!-- 答题-视频讲解-封面 -->
              <image class="answer-video-explain-cover" :src="getQuestionOtherInfo(item.questionId!)?.videoCoverUrl"
                mode="widthFix"></image>
              <!-- 视频播放 -->
              <view class="answer-video-play-btn icon-play-filled"
                @tap="toVideo(getQuestionOtherInfo(item.questionId!)?.videoUrl!, item)"></view>
            </view>
          </view>
          <!-- 页面-灰色分割线 -->
          <view class="page-gray-border" :class="seeMode"
            v-if="isAnswerOrLearn(item.questionId!) && getQuestionOtherInfo(item.questionId!)?.explainHtml"></view>
          <!-- 答题-题目解析 -->
          <view class="answer-topic-explain"
            v-if="isAnswerOrLearn(item.questionId!) && getQuestionOtherInfo(item.questionId!)?.explainHtml">
            <!-- 答题-题目解析-标题 -->
            <view class="answer-topic-explain-title">
              <!-- 答题-题目解析-标题-左边 -->
              <view class="answer-topic-explain-title-left" :class="seeMode">题目解析</view>
              <!-- 答题-题目解析-标题-右边 -->
              <view class="answer-topic-explain-title-right">

              </view>
            </view>
            <!-- 答题-题目解析-内容 -->
            <view class="answer-topic-explain-content">
              <uv-parse :content="getQuestionOtherInfo(item.questionId!)?.explainHtml"
                :tagStyle="topicExplainImgTagStyle" :show-img-menu="false"></uv-parse>
            </view>
          </view>
          <!-- 答题-考点 -->
          <view class="answer-exam-points"
            v-if="isAnswerOrLearn(item.questionId!) && getQuestionOtherInfo(item.questionId!)!.knows.length >= 1">
            <view class="answer-exam-point-label">考点</view>
            <view class="answer-exam-point-item" :class="seeMode"
              v-for="(know, know_index) in getQuestionOtherInfo(item.questionId!)?.knows" :key="know_index"
              @tap="toKnowExercise(know.knowTypeCode!, know.id!)">{{ know.name
              }}</view>
          </view>
          <!-- 答题-难度/错误率 -->
          <view class="answer-exam-infos" v-if="isAnswerOrLearn(item.questionId!)">
            <view class="info-l" v-if="getQuestionOtherInfo(item.questionId!)?.difficulty">
              <view class="label">难度</view>
              <view>
                <uni-rate :value="getQuestionOtherInfo(item.questionId!)?.difficulty" color="#ececec	"
                  active-color="#f56c24" :size="15" :max="5" :allowHalf="true" :readonly="true" />
              </view>
            </view>
            <view class="info-r" v-if="getQuestionOtherInfo(item.questionId!)?.wrongRate">
              <view class="label">考友错误率</view>
              <view class="rate">
                {{ Math.round(getQuestionOtherInfo(item.questionId!)?.wrongRate! * 1000) / 10 }}%
              </view>
            </view>

          </view>
          <!-- 答题-页面底部-控制留白 -->
          <view class="page-bottom">

          </view>
        </scroll-view>
      </template>
    </UFastAnswerSwiper>
    <!-- 底部工具栏 -->
    <view class="toolbar" :class="seeMode" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
      <view class="left">
        <view class="icon-item" @tap="questionCollect">
          <text class='icon ' :class="isQuestionCollect ? 'icon-star-filled' : 'icon-star'"></text>
          <text class="txt">
            {{ isQuestionCollect ? '已收藏' : '收藏' }}
          </text>
        </view>
        <!-- #ifdef MP -->
        <view class="icon-item" @tap="openAnswerSettingPopup">
          <text class='icon icon-settings'></text>
          <text class="txt">设置</text>
        </view>
        <!-- #endif -->
      </view>
      <!-- 如果是抖音，答题模式放中间 -->
      <!-- #ifdef MP-TOUTIAO -->
      <view class="mode-switchs" :class="seeMode">
        <view class="switch-item" :class="{ active: modeActive == 1 }" @tap="changeMode(1)">答题模式</view>
        <view class="switch-item" :class="{ active: modeActive == 2 }" @tap="changeMode(2)">背题模式</view>
      </view>
      <!-- #endif -->
      <view class="right">
        <!-- #ifndef MP-TOUTIAO -->
        <view class="icon-item" @tap="operAnserSheetPopup">
          <text class=" icon correct icon-circle-check-filled " :class="seeMode"></text>
          <text class="txt correct" :class="seeMode">
            {{ correctAnswerCount }}
          </text>
        </view>
        <view class="icon-item">
          <text class="icon error  icon-circle-close-filled" :class="seeMode" @tap="operAnserSheetPopup">
          </text>
          <text class="txt error" :class="seeMode">
            {{ errorAnswerCount }}
          </text>
        </view>
        <!-- #endif -->
        <!-- #ifdef MP-TOUTIAO -->
        <view class="toutiao-icon-item">
          <view class="icon-item" @tap="operAnserSheetPopup">
            <text class=" icon correct icon-circle-check-filled "></text>
            <text class="txt correct">
              {{ correctAnswerCount }}
            </text>
          </view>
          <view class="icon-item">
            <text class="icon error  icon-circle-close-filled" @tap="operAnserSheetPopup">
            </text>
            <text class="txt error">
              {{ errorAnswerCount }}
            </text>
          </view>
        </view>

        <!-- #endif -->

        <view @tap="operAnserSheetPopup" class="icon-item">
          <text class="icon icon-tool-bar"></text>
          <text class="txt">{{ topicIndex + 1 }}<text class="txt count">/{{ questionCount }}</text>
          </text>
        </view>
      </view>
    </view>


  </view>
  <!-- uni-ui-弹出层-答题卡 -->
  <uni-popup ref="answerSheetPopupRef" type="bottom" border-radius="10px 10px 0 0" :safe-area='false'
    @change="onAnswerSheetPopupChange">
    <view class="answer-sheet" :class="seeMode">
      <!-- 答题卡头部 -->
      <view class="header">
        <view class="left">
          <!-- 清除答题记录 -->
          <view class="clear-btn" @tap="clearAnswers">清除做题记录</view>
        </view>
        <view class="right">
          <view class="icon-item" @tap="closeAnserSheetPopup">
            <text class=" icon correct icon-circle-check-filled "></text>
            <text class="txt correct">
              {{ correctAnswerCount }}
            </text>
          </view>
          <view class="icon-item">
            <text class="icon error  icon-circle-close-filled" @tap="closeAnserSheetPopup">
            </text>
            <text class="txt error">
              {{ errorAnswerCount }}
            </text>
          </view>

          <view @tap="closeAnserSheetPopup" class="icon-item">
            <text class="icon icon-tool-bar"></text>
            <text class="txt">{{ topicIndex + 1 }}<text class="txt count">/{{ questionCount }}</text>
            </text>
          </view>
        </view>
      </view>
      <!-- 答题卡内容 -->
      <!-- 试题序号容器 -->
      <scroll-view class="scroll-contaier" :scroll-y="true" :scroll-into-view="answerSheetScorollViewId">
        <view class="list">
          <!-- 试题序号 -->
          <view :id="'list-item-' + index" class="item" v-for="(item, index) in AnserSheetList" :class="item.class"
            :key="index" @tap="pickerTopic(index)">
            {{ index + 1 }}
            <view class='new-role' v-if="item.isNewRole">新规题</view>
            <view class='locate' v-if="item.isLocate">本地考题</view>

          </view>
        </view>
      </scroll-view>
      <view class="bottom" :style="{ height: safeAreaInsetsBottom + 'px' }"></view>
    </view>
  </uni-popup>
  <!-- uni-ui-弹出层-设置 -->
  <uni-popup ref="answerSettingPopupRef" type="bottom" border-radius="10px 10px 0 0" :safe-area='false'>
    <AnswerSetting />
  </uni-popup>
</template>

<script lang="ts" setup>
  import { ref, computed, toValue, onMounted, nextTick, watch } from 'vue'
  import type { LearnBaseQuestionInfo, AnswerOptionType, LearnBaseQuestionOtherInfo } from '@/api/base/types'
  import { onLoad } from '@dcloudio/uni-app'
  import { useTopicIsNewRule, useTopicIsLocate } from '@/composables/LearnBase'
  import { useExerciseQuestions } from '@/composables/Exercise'
  import type { UFastAnswerSwiperInstance } from '@/types/component'
  import { useQuestionAnswerCount, useClearQuestionAnswer, useSetAnswerTopicIndex, useGetAnswerResult, useAddQuestionAnswer, useQuestionCollect, useIsQuestionCollect } from '@/composables/Exercise'
  import { formatDate } from '@/utils/index'
  import { getQuestionOtherInfoApi } from '@/api/base'
  // 引入富文本组件
  import uvParse from '@climblee/uv-ui/components/uv-parse/uv-parse.vue'
  import AnswerSetting from '@/components/AnswerSetting/AnswerSetting.vue'
  import { useSettingStore } from '@/stores/modules/setting'
  import type { AnswerTopicIndex } from '@/api/constants'
  import { ExerciseTypeEnum } from '@/api/constants'

  const settingStore = useSettingStore()

  // #ifdef MP-TOUTIAO
  // 获取小程序下胶囊按钮的布局位置信息
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  // 上边界坐标，单位：px
  let top = (menuButtonInfo.top - 10) + 'px'
  const zwHight = ref(top)
  // 高度，单位：px
  let height = (menuButtonInfo.height + 20) + 'px'
  const titleHeight = ref(height)
  // #endif
  // 获取底部安全区域
  const { safeAreaInsets, safeArea } = uni.getSystemInfoSync()
  let safeAreaInsetsBottom = safeAreaInsets?.bottom ? safeAreaInsets?.bottom : 0
  let toolbarHeight = 60
  // #ifdef H5
  toolbarHeight = 120
  // #endif
  // 主题部分的高度
  const mainContainerHeigth = ref(safeArea?.height ? (safeArea?.height - safeAreaInsetsBottom - toolbarHeight) + 'px' : '50vh')
  // 题库种类
  const baseType = ref<string>()
  // 试题
  const questions = ref<LearnBaseQuestionInfo[]>([])
  // 试题总量
  const questionCount = ref<number>(0)
  //答题位置
  const answerTopicIndex = ref<AnswerTopicIndex>()

  onLoad((options: any) => {
    baseType.value = options.baseType
    let exerciseQuestions = useExerciseQuestions(options)
    questions.value = exerciseQuestions.questions!
    answerTopicIndex.value = exerciseQuestions.answerTopicIndex
    questionCount.value = questions.value!.length
    if (answerTopicIndex.value) {
      currentIndex.value = answerTopicIndex.value?.topicIndex!
    }
  })


  // 答题模式 1：答题模式，2：背题模式
  const modeActive = ref<1 | 2>(1)
  // 改变答题模式
  const changeMode = (mode: 1 | 2) => {
    modeActive.value = mode
  }
  // 答题Swiper
  const answerSwiperRef = ref<UFastAnswerSwiperInstance>()
  // 当前题目位置
  const currentIndex = ref<number>(0)
  // 当前题目位置
  const topicIndex = ref<number>(0)

  // 试题选项类型枚举
  enum AnswerOptionTypeEnum {
    // 判断题
    Judge = '0',
    // 单选题
    Single = '1',
    // 多选题
    Multiple = '2'
  }
  // 试题选项类型名称
  const answerOptionTypeLable = (item: LearnBaseQuestionInfo) => {
    switch (item.optionType) {
      case AnswerOptionTypeEnum.Judge:
        return '判断'
      case AnswerOptionTypeEnum.Single:
        return '单选'
      case AnswerOptionTypeEnum.Multiple:
        return '多选'
      default:
        return ''
    }
  }

  // 试题其他信息
  const questionOthorInfos = ref<LearnBaseQuestionOtherInfo[]>([])
  // 获取试题其他信息
  const getQuestionOtherInfo = (questionId: number) => {
    let questionOtherInfo = questionOthorInfos.value.find((item) => item.questionId === questionId)
    if (questionOtherInfo) {
      return questionOtherInfo
    }
    else {
      getQuestionOtherInfoApi(questionId).then(({ data }) => {
        questionOtherInfo = data
        // questionOtherInfo.explainHtml = questionOtherInfo.explainHtml?.replace(/\<img/gi,
        //   '<img style="width: 50vw;margin-left: 25vw;"'
        // )
        let index = questionOthorInfos.value.findIndex((item) => item.questionId === questionId)
        if (index === -1) {
          questionOthorInfos.value.push(questionOtherInfo)
        }

        return questionOtherInfo
      })
    }
  }

  // 答题对象
  interface AnswerItem {
    questionId: number,
    optionList: AnswerOptionType[],
    answer: string,
    status?: number
  }
  // 答题列表
  const answerList = ref<AnswerItem[]>([])

  // 添加答题
  const addAnswer = (answerItem: AnswerItem) => {
    if (!isAnswer(answerItem.questionId)) {
      answerList.value.push(answerItem)
    }
  }
  // 检查是否已答题
  const isAnswer = (questionId: number) => {
    let answerIndex = answerList.value.findIndex((item) => item.questionId === questionId)
    return answerIndex >= 0
  }

  // 得到答题项
  const getAnswerItem = (questionId: number): AnswerItem => {
    let answerItem = answerList.value.find((item) => item.questionId === questionId)
    return answerItem!
  }
  // 答题选项列表
  const answerOptonList = (item: LearnBaseQuestionInfo): AnswerOptionType[] => {

    // 如果是背题模式
    if (modeActive.value == 2) {
      let optionList: AnswerOptionType[] = getOptionList(item)
      // 试题答案
      let answer = item.success
      optionList.forEach((option: AnswerOptionType) => {
        option.hoveClass = 'none'
        // 正确的选项
        if (answer!.indexOf(option.key) >= 0) {
          option.name = ''
          option.className = 'correct'
          option.iconClass = 'icon-circle-check-filled'
        }
      })
      return optionList
    }

    // 试题没有答题
    if (!isAnswer(item.questionId!)) {
      // 设置未做题
      let optionList: AnswerOptionType[] = getOptionList(item)
      let answerItem: AnswerItem =
      {
        questionId: item.questionId!,
        answer: '',
        optionList: optionList
      }
      addAnswer(answerItem)
      return answerItem.optionList
    }
    else {
      let answerItem = getAnswerItem(item.questionId!)
      return answerItem!.optionList!
    }
  }


  // 获取试题选项列表
  const getOptionList = (item: LearnBaseQuestionInfo) => {

    let optionList: AnswerOptionType[] = []

    if (item.optionType == AnswerOptionTypeEnum.Judge) {
      optionList = [
        { name: 'A', key: 'Y', content: '正确', selected: false, hoveClass: 'hover', iconClass: 'icon', answer: '' },
        { name: 'B', key: 'N', content: '错误', selected: false, hoveClass: 'hover', iconClass: 'icon', answer: '' },
      ]
    }
    else {
      optionList = [
        { name: 'A', key: 'A', content: item.optionA || '', selected: false, hoveClass: 'hover', iconClass: 'icon', answer: '' },
        { name: 'B', key: 'B', content: item.optionB || '', selected: false, hoveClass: 'hover', iconClass: 'icon', answer: '' },
        { name: 'C', key: 'C', content: item.optionC || '', selected: false, hoveClass: 'hover', iconClass: 'icon', answer: '' },
        { name: 'D', key: 'D', content: item.optionD || '', selected: false, hoveClass: 'hover', iconClass: 'icon', answer: '' },
      ]
    }

    return optionList
  }
  // 大图预览
  const previewImg = (item: LearnBaseQuestionInfo) => {
    uni.previewImage({
      current: 0,
      showmenu: false,
      urls: [item.mediaContent!],
      indicator: 'none',
    })
  }

  // 答题
  const makeChoice = (item: LearnBaseQuestionInfo, index: number) => {
    // 背题模式不能答题
    if (modeActive.value === 2) {
      return
    }

    // 获取答题扩展项
    let answerItem = getAnswerItem(item.questionId!)

    // 是否已经答题
    if (answerItem.answer) {
      return
    }
    // 试题选项
    let optionType = item.optionType
    let answerOptionList = answerItem.optionList

    // 如果是判断题或者单选题
    if (optionType == AnswerOptionTypeEnum.Judge || optionType == AnswerOptionTypeEnum.Single) {
      // 试题答案
      let questionAnswer = item.success
      // 选择的答案
      answerItem.answer = answerOptionList[index].key
      // 设置答题项不能再答题
      answerOptionList.forEach((option: AnswerOptionType) => {
        option.hoveClass = 'none'
      })

      // 选择的选项正确
      if (answerItem.answer === questionAnswer) {
        answerItem.status = 1
        answerOptionList[index].name = ''
        answerOptionList[index].className = 'correct'
        answerOptionList[index].iconClass = 'icon-circle-check-filled'
      }
      // 选择的选项错误
      else {
        answerItem.status = 0
        answerOptionList[index].name = ''
        answerOptionList[index].className = 'error'
        answerOptionList[index].iconClass = 'icon-circle-close-filled'
        // 找出正确的选项
        let successOptionIndex = answerOptionList.findIndex((currentOption: AnswerOptionType) => {
          return currentOption.key === questionAnswer
        })
        // 设置正确的选项
        answerOptionList[successOptionIndex].name = ''
        answerOptionList[successOptionIndex].className = 'correct'
        answerOptionList[successOptionIndex].iconClass = 'icon-circle-check-filled'
      }

      // 答题结果
      let questionAnswerResult = {
        questionId: item.questionId,
        baseTypeCode: item.baseTypeCode,
        result: answerItem.answer,
        status: answerItem.answer === item.success ? 1 : 0,
        creatTime: formatDate(new Date()),
        knows: getQuestionOtherInfo(item.questionId!)?.knows
      }

      // 添加答题记录
      useAddQuestionAnswer(questionAnswerResult).then(res => {
        console.log('添加答题记录')
      })

      // 设置答题卡样式
      setAnserSheetItemClass(topicIndex.value)
      if (questionAnswerResult.status === 1 && answerCorrectAutoPre.value) {
        // 答对切换下一题
        setTimeout(() => {
          goNextTopic()
        }, 100);
      }


    }
    //如果是多选题
    else if (optionType == AnswerOptionTypeEnum.Multiple) {
      answerOptionList[index].selected = !answerOptionList[index].selected
      console.log('answerOptionList[index].selected', answerOptionList[index].selected)
      let selected = answerOptionList[index].selected
      if (selected) {
        answerOptionList[index].className = 'active'
        answerOptionList[index].iconClass = 'icon'
      }
      else {
        answerOptionList[index].className = ''
        answerOptionList[index].iconClass = 'icon'
      }
    }
  }

  // 多选题确认答题
  const confirm = (item: LearnBaseQuestionInfo) => {
    let answerItem = getAnswerItem(item.questionId!)
    let answerOptionList = answerItem.optionList

    // 获取选择的选项
    let selectOptionList = answerOptionList.filter((item: AnswerOptionType) => item.selected)
    if (selectOptionList.length < 2) {
      uni.showToast({
        title: "请选择2个及以上答案",
        icon: "none",
        duration: 2000
      })
      return
    }
    // 选择的试题答案列表
    let selectOptionAnswerList = selectOptionList.map((item: AnswerOptionType) => item.key)
    // 选择的试题答案
    answerItem.answer = selectOptionAnswerList.sort().join('')
    // 设置试题已做题
    answerOptionList.forEach((option: AnswerOptionType) => {
      option.hoveClass = 'none'
    })
    // 试题答案
    let questionAnswer = item.success
    // 选择的正确
    if (answerItem.answer === questionAnswer) {

      answerItem.status = 1

      answerOptionList.forEach((option: AnswerOptionType) => {
        if (option.selected) {
          option.name = ''
          option.className = 'correct'
          option.iconClass = 'icon-circle-check-filled'
        }
      })
    }
    // 选择的错误
    else {
      answerItem.status = 0

      answerOptionList.forEach((option: AnswerOptionType) => {
        if (option.selected) {
          option.name = ''
          if (questionAnswer!.indexOf(option.key) >= 0) {
            option.className = 'correct'
            option.iconClass = 'icon-circle-check-filled'
          }
          else {
            option.className = 'error'
            option.iconClass = 'icon-circle-close-filled'
          }
        }
        else if (questionAnswer!.indexOf(option.key) >= 0) {
          option.name = ''
          option.className = 'correct'
          option.iconClass = 'icon-circle-check-filled'
        }
      })
    }

    // 答题结果
    let questionAnswerResult = {
      questionId: item.questionId,
      baseTypeCode: item.baseTypeCode,
      result: answerItem.answer,
      status: answerItem.answer === item.success ? 1 : 0,
      creatTime: formatDate(new Date()),
      knows: getQuestionOtherInfo(item.questionId!)?.knows
    }
    useAddQuestionAnswer(questionAnswerResult).then(res => {
      console.log('添加答题记录')
    })
    // 设置答题卡样式
    setAnserSheetItemClass(topicIndex.value)
    if (questionAnswerResult.status === 1 && answerCorrectAutoPre.value) {
      // 答对切换下一题
      setTimeout(() => {
        goNextTopic()
      }, 100);
    }
  }

  // 本题重做
  const answerRedo = (item: LearnBaseQuestionInfo) => {
    let answerItem = answerList.value.find((i) => i.questionId === item.questionId!)
    if (answerItem) {
      answerItem.answer = ''
      answerItem.optionList = getOptionList(item)

    }
  }

  // 当前试题发生变化
  const changeTopic = (index: number) => {
    topicIndex.value = index
    if (answerTopicIndex.value) {
      setTimeout(() => {
        useSetAnswerTopicIndex(answerTopicIndex.value?.id!, index)
      }, 20)
    }
    getQuestionOtherInfo(questions.value![index].questionId!)
    // 清空语音播放
    AnswerTopicSounds.value = []
    AnswerSkillSounds.value = []
    AnswerSkillExplainSounds.value = []
    // 停止语音播放
    innerAudioContext.stop()
  }

  // 切换下一题
  const goNextTopic = () => {
    answerSwiperRef.value?.goNextTopic()
  }


  // 题目解析富文本图片样式
  const topicExplainImgTagStyle = ref({
    img: 'width: 50vw;margin-left:25vw;'
  })
  // 计算属性，是否答题或者已学习
  const isAnswerOrLearn = computed(() => (questionId: number) =>
    getAnswerItem(questionId)?.answer || modeActive.value == 2
  )

  //答题-语音-对象
  interface AnswerSoundItem {
    questionId: number,
    playTxt: string,
  }
  // 答题-题目-语音
  const AnswerTopicSounds = ref<AnswerSoundItem[]>([])
  const answerTopicSound = computed(() => (questionId: number) => {
    let answerSound = AnswerTopicSounds.value.find((item) => item.questionId === questionId)
    return answerSound
  })

  // 答题-技巧-语音
  const AnswerSkillSounds = ref<AnswerSoundItem[]>([])
  const answerSkillSound = computed(() => (questionId: number) => {
    let answerSound = AnswerSkillSounds.value.find((item) => item.questionId === questionId)
    return answerSound
  })
  // 答题-技巧-解析-语音
  const AnswerSkillExplainSounds = ref<AnswerSoundItem[]>([])
  const answerSkillExplainSound = computed(() => (questionId: number) => {
    let answerSound = AnswerSkillExplainSounds.value.find((item) => item.questionId === questionId)
    return answerSound
  })
  // 语音播放对象
  const innerAudioContext = uni.createInnerAudioContext();

  // 语音播放
  const soundPlay = (questionId: number, type: 'topic' | 'skill' | 'skill-explain') => {
    let voiceUrl: string | undefined
    let answerSound: AnswerSoundItem | undefined
    switch (type) {
      case 'topic':
        answerSound = AnswerTopicSounds.value.find((item) => item.questionId === questionId)
        if (answerSound) {
          let answerSoundIndex = AnswerTopicSounds.value.findIndex((item) => item.questionId === questionId)
          AnswerTopicSounds.value.splice(answerSoundIndex, 1)
          // 停止播放
          innerAudioContext.stop()
          return
        }
        else {
          AnswerTopicSounds.value.push({ questionId: questionId, playTxt: '读题中' })
          let info = getQuestionOtherInfo(questionId)
          // 读题语音播放选项
          if (answerSoundPlayOption.value === AnswerSoundPlayOptionEnum.Topic_Option) {
            voiceUrl = info?.voiceOptionUrl
          }
          else if (answerSoundPlayOption.value === AnswerSoundPlayOptionEnum.Topic_Answer) {
            voiceUrl = info?.voiceSuccessUrl
          }
          else {
            voiceUrl = info?.voiceUrl
          }
          AnswerSkillSounds.value = []
          AnswerSkillExplainSounds.value = []
        }
        break
      case 'skill':
        answerSound = AnswerSkillSounds.value.find((item) => item.questionId === questionId)
        if (answerSound) {
          let answerSoundIndex = AnswerSkillSounds.value.findIndex((item) => item.questionId === questionId)
          AnswerSkillSounds.value.splice(answerSoundIndex, 1)
          // 停止播放
          innerAudioContext.stop()
          return
        }
        else {
          AnswerSkillSounds.value.push({ questionId: questionId, playTxt: '播放中...' })
          let info = getQuestionOtherInfo(questionId)
          voiceUrl = info?.knackVoiceUrl
          AnswerTopicSounds.value = []
          AnswerSkillExplainSounds.value = []
        }
        break
      case 'skill-explain':
        answerSound = AnswerSkillExplainSounds.value.find((item) => item.questionId === questionId)
        if (answerSound) {
          let answerSoundIndex = AnswerSkillExplainSounds.value.findIndex((item) => item.questionId === questionId)
          AnswerSkillExplainSounds.value.splice(answerSoundIndex, 1)
          // 停止播放
          innerAudioContext.stop()
          return
        }
        else {
          AnswerSkillExplainSounds.value.push({ questionId: questionId, playTxt: '播放中...' })
          let info = getQuestionOtherInfo(questionId)
          voiceUrl = info?.conciseExplainVoiceUrl
          AnswerTopicSounds.value = []
          AnswerSkillSounds.value = []
        }
        break
    }

    if (voiceUrl) {
      innerAudioContext.src = voiceUrl;
      innerAudioContext.play()
      innerAudioContext.onError((res) => {
      });
    }
    else {
      uni.showToast({
        title: "没有找到语音文件",
        icon: "none",
        duration: 2000
      })
    }
    innerAudioContext.onEnded(() => {
      // 答题-题目-语音
      AnswerTopicSounds.value = []
      // 答题-技巧-语音
      AnswerSkillSounds.value = []
      // 答题-技巧-解析-语音
      AnswerSkillExplainSounds.value = []
    })

  }

  // 跳转答题视频播放
  const toVideo = (url: string, item: LearnBaseQuestionInfo) => {
    uni.navigateTo({
      url: `/pagesExercise/answerVideoPlayer/answerVideoPlayer?url=${url}&data=${JSON.stringify(item)}`
    })
  }

  // 本体技巧练习
  const toTopicSkillExercise = (questionIds: number[]) => {
    uni.navigateTo({
      url: `/pagesExercise/answer/answer?exerciseType=${ExerciseTypeEnum.TopicSkillExercise}&baseType=${baseType.value}&questionIds=${questionIds}`
    })
  }


  // 试题是否收藏
  const isQuestionCollect = computed(() => {
    if (questions.value) {
      let question = questions.value[topicIndex.value]
      if (question) {
        let colect = useIsQuestionCollect(question.questionId!).isQuestionCollect.value
        return colect
      }
    }
    return false
  })

  // 试题收藏
  const questionCollect = () => {
    let question = questions.value![topicIndex.value]
    setTimeout(() => {
      useQuestionCollect(
        {
          baseTypeCode: question.baseTypeCode!,
          questionId: question.questionId!,
          creatTime: formatDate(new Date())
        }
      )
    }, 20);

  }
  // uni-ui-弹出层组件-答题卡 ref
  const answerSheetPopupRef = ref<{
    open: (type?: UniHelper.UniPopupType) => void
    close: () => void
  }>()


  // 打开答题卡弹出层
  const operAnserSheetPopup = () => {
    answerSheetPopupRef.value?.open()
  }
  // 关闭答题卡弹出层
  const closeAnserSheetPopup = () => {
    answerSheetPopupRef.value?.close()
  }
  // 答题卡-加载
  interface AnserSheetItem {
    questionId?: number,
    class: string,//答题卡样式
    isNewRole: boolean,// 新规题
    isLocate: boolean,// 本市考题
  }
  // 答题卡-列表
  const AnserSheetList = ref<AnserSheetItem[]>()
  onMounted(() => {
    // #ifdef MP-TOUTIAO
    setTimeout(() => {
      pickerTopic(topicIndex.value)
    }, 800)
    // #endif

    setTimeout(() => {
      AnserSheetList.value = questions.value?.map((item, index) => {
        return { questionId: item.questionId, class: getAnserSheetItemClass(index, item.questionId!), isNewRole: useTopicIsNewRule(baseType.value!, item.questionId!), isLocate: useTopicIsLocate(baseType.value!, item.classesCode!) }
      })
    }, 500);

  })


  // 答题卡-获取答题-样式
  const getAnserSheetItemClass = (questionIndex: number, questionId: number) => {

    let classNames = ''
    if (topicIndex.value == questionIndex) {
      classNames = 'active'
    }
    // 获取答题结果
    let answerResult = useGetAnswerResult(questionId)
    // 答题正确
    if (answerResult === 1) {
      classNames += ' correct'
    }
    // 答题错误
    else if (answerResult === 0) {
      classNames += ' error'
    }

    return classNames
  }

  // 答题卡-设置样式
  const setAnserSheetItemClass = (sheetItemIndex: number) => {
    // 设置答题卡样式
    let ansertSheetItem = AnserSheetList.value![sheetItemIndex]
    if (ansertSheetItem) {
      let activeItem = AnserSheetList.value!.find(item => item.class?.includes('active'))
      if (activeItem) {
        activeItem.class = activeItem.class.replace('active', '')
      }

      let ansertSheetItemClass = ''
      if (topicIndex.value == sheetItemIndex) {
        ansertSheetItemClass = 'active'
      }

      let answerItem = getAnswerItem(ansertSheetItem.questionId!)

      if (answerItem && answerItem.status) {
        if (answerItem.status! === 1) {
          ansertSheetItemClass += ' correct'
        }
        // 答题错误
        else if (answerItem.status! === 0) {
          ansertSheetItemClass += ' error'
        }
      }
      else {
        // 获取答题结果
        let answerResult = useGetAnswerResult(ansertSheetItem.questionId!)
        if (answerResult === 1) {
          ansertSheetItemClass += ' correct'
        }
        // 答题错误
        else if (answerResult === 0) {
          ansertSheetItemClass += ' error'
        }
      }

      ansertSheetItem.class = ansertSheetItemClass
    }
  }

  // 答题卡-清除样式
  const clearAnserSheetItemClass = () => {
    AnserSheetList.value!.filter(item => item.class?.includes('correct') || item.class?.includes('error'))
      .forEach(item => item.class = item.class.replace('correct', '').replace('error', ''))

  }
  const answerSheetScorollViewId = ref<string>()
  // 答题卡-打开和关闭事件-onAnswerSheetPopupChange
  const onAnswerSheetPopupChange = (e: UniHelper.UniPopupOnChangeEvent) => {
    if (e.show) {
      // 设置答题-试题编号-样式
      setAnserSheetItemClass(toValue(topicIndex))
      nextTick(() => {
        //答题卡滚动到当前题目编号
        answerSheetScorollViewId.value = `list-item-${toValue(topicIndex)}`
      })
    }

  }

  //答题卡-指定题目
  const pickerTopic = (index: number) => {
    //跳转到指定项，需要重置swiperCurrent，复杂数据会乱
    answerSwiperRef.value?.pickerTopic(index)
    closeAnserSheetPopup()
  }
  // 答题卡-清空做的题记录
  const clearAnswers = () => {
    uni.showModal({
      title: "温馨提示",
      content: "是否确认清除当前全部答题记录？",
      success: (res) => {
        if (res.confirm) {
          // 请示历史答题记录
          useClearQuestionAnswer(questions.value?.map(item => item.questionId!)!)
          // 清除本次答题记录
          answerList.value = []
          // 清除答题卡样式
          clearAnserSheetItemClass()
          uni.showToast({
            title: "清除完毕",
            icon: "success"
          })
          // 关闭答题卡
          closeAnserSheetPopup()
          // 跳转第一题
          pickerTopic(0)
        } else {
          uni.showToast({
            title: "已取消",
            icon: "success"
          })
        }
      }
    })
  }
  // 正确的试题数量
  const correctAnswerCount = computed(() => useQuestionAnswerCount(baseType.value!, questions.value?.map(item => item.questionId!)!, 1).count.value)
  // 错误的答题数量
  const errorAnswerCount = computed(() => useQuestionAnswerCount(baseType.value!, questions.value?.map(item => item.questionId!)!, 0).count.value)

  // 答题-设置
  const answerSettingPopupRef = ref<UniHelper.UniPopup>()
  // 打开-答题设置-弹出层
  const openAnswerSettingPopup = () => {
    answerSettingPopupRef.value?.open()
  }

  // 答题-答对-自动跳到下一题
  const answerCorrectAutoPre = computed(() => settingStore.answerCorrectAutoPre)

  // 答题-语音播放选项-枚举
  enum AnswerSoundPlayOptionEnum {
    'Topic',
    'Topic_Option',
    'Topic_Answer'
  }
  // 语音播放选项
  const answerSoundPlayOption = computed(() => settingStore.answerSoundPlay)

  // 字号-设置的持久化字号
  const pageFontSize = computed(() => settingStore.fontSize + 'rpx')
  // 答题-显示模式
  const seeMode = computed(() => settingStore.seeMode)

  // 答题-导航栏背景色
  const nvaBackgroundColor = computed(() => {
    if (settingStore.seeMode === 'yejianmoshi') {
      return '#181b1d'
    }
    else if (settingStore.seeMode === 'huyanmoshi') {
      return '#f8f7ed'
    }
    else {
      return '#fff'
    }
  })

  // 去考点练习
  const toKnowExercise = (knowTypeCode: string, knowId: number) => {
    uni.navigateTo({
      url: `/pagesExercise/knowDescription/knowDescription?&baseType=${baseType.value}&knowTypeCode=${knowTypeCode}&knowId=${knowId}`
    })
  }

  //退出
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  page {
    // background-color: #f7f7f7;
    height: 100%;
    overflow: auto;
  }

  .viewport {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;

    &.yejianmoshi {
      background-color: #181b1d;
      color: #999;
    }

    &.huyanmoshi {
      background-color: #f8f7ed;
    }
  }

  /* #ifdef MP-TOUTIAO */
  // 抖音自定义导航栏
  .custom-nav-bar {

    // 顶部占位
    .status-bar {
      width: 100vw;
      height: v-bind(zwHight);
    }

    // 标题行
    .title-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      height: v-bind(titleHeight);

      .title-text {
        // margin-left: 40rpx;
        font-size: 34rpx;
        color: rgb(34, 34, 34);
      }
    }

    &.yejianmoshi {
      .title-container {
        .title-text {
          color: #999;
        }
      }

    }
  }

  /* #endif */
  .nav-bar {
    .txt {
      &.yejianmoshi {
        color: #999;
      }
    }

  }

  //答题模式
  .mode-switchs {
    display: flex;
    flex: 1;
    justify-self: center;
    justify-content: center;
    align-items: center;
    font-size: 26rpx;

    &.yejianmoshi {
      .switch-item {
        color: #999;
        background-color: #181b1d;
        border-color: #313433;

        &.active {
          background-color: #313433;
          color: #e3e3e3;
        }
      }

    }

    &.huyanmoshi {
      .switch-item {
        background-color: #f8f7ed;
      }
    }

    .switch-item {
      padding: 0 16rpx;
      border: 2rpx solid rgb(51, 51, 51);
      width: 140rpx;
      height: 55rpx;
      line-height: 55rpx;
      text-align: center;
      background-color: #FFF;
      color: rgb(51, 51, 51);


      &:first-of-type {
        border-radius: 6rpx 0 0 6rpx;
      }

      &:last-of-type {
        border-radius: 0 6rpx 6rpx 0;
      }

      &.active {
        background-color: rgb(51, 51, 51);
        color: #fff;
      }
    }
  }

  // 答题-swiper
  .answer-swiper {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .main-container {
    display: flex;
    flex-direction: column;
    height: v-bind(mainContainerHeigth);
    overflow: hidden;
    font-size: v-bind(pageFontSize);
    line-height: 1.8;

    .answer {
      display: flex;
      flex-direction: column;
      padding: 0rpx 20rpx;

      // 答题-ID
      .answer-id {
        padding-right: 20rpx;
        text-align: right;
        font-size: 16rpx;
        color: #ccc;
      }

      //答题-题目
      .answer-topic {

        // 答题-题目-选项类型
        .answer-topic-option-type {
          display: inline-block;
          margin-right: 10rpx;
          padding: 0 12rpx;
          height: 36rpx;
          background-color: #57c461;
          font-size: 22rpx;
          color: #fff;
          text-align: center;
          line-height: 36rpx;
          border-radius: 6rpx 6rpx 6rpx 0rpx;
          vertical-align: middle;

          &.yejianmoshi {
            color: #b4b4b4;
            background-color: #449c49;
          }
        }

        //新规题
        .answer-topic-new-role {
          display: inline-block;
          margin-right: 10rpx;
          padding: 0 12rpx;
          height: 36rpx;
          background-color: #f87629;
          font-size: 22rpx;
          color: #fff;
          text-align: center;
          line-height: 36rpx;
          border-radius: 6rpx 6rpx 6rpx 0rpx;
          vertical-align: middle;

          &.yejianmoshi {
            color: #b4b4b4;
            background-color: #f87629;
          }
        }

        // 本市考题
        .answer-topic-locate {
          display: inline-block;
          margin-right: 10rpx;
          padding: 0 12rpx;
          height: 36rpx;
          background-color: #9a81e0;
          font-size: 22rpx;
          color: #fff;
          text-align: center;
          line-height: 36rpx;
          border-radius: 6rpx 6rpx 6rpx 0rpx;
          vertical-align: middle;

          &.yejianmoshi {
            color: #b4b4b4;
            background-color: #9a81e0;
          }
        }

        // 答题-题目-内容

        .answer-topic-content {
          vertical-align: middle;
        }

        //答题-题目-读题
        .answer-topic-sound-play-btn {
          display: inline-block;
          background-color: #e8f9ec;
          padding: 4rpx 16rpx;
          height: 36rpx;
          line-height: 36rpx;
          text-align: center;
          vertical-align: middle;
          color: #57c461;
          border-radius: 36rpx;

          &.yejianmoshi {
            color: #449c49;
            background-color: #293530;
          }

          .btn-icon {
            position: relative;
            display: inline-block;
            padding-left: 4rpx;
            font-size: 36rpx;

            .btn-play {
              position: absolute;
              right: 0;
              top: 0;
              display: inline-block;
              width: 0rpx;
              height: 100%;
              background-color: #e8f9ec;
              animation-name: sound-play-animation;
              animation-duration: .5s;
              animation-iteration-count: infinite;

              &.yejianmoshi {
                background-color: #293530;
              }

            }
          }

          .btn-txt {
            padding-left: 4rpx;
            font-size: 20rpx;
            vertical-align: top;
          }
        }
      }

      // 答题-图片 等媒体资源
      .answer-media {
        display: flex;
        justify-content: center;
        padding: 10rpx 20rpx 20rpx;
        height: 365rpx;
        width: 100%;

        .media-img {
          height: 100%;
          max-width: 100%;

        }
      }

      // 答题-选项
      .answer-options {
        margin: 20rpx 0rpx;

        // 试题选项
        .item {
          display: flex;
          align-items: center;
          padding: 18rpx 20rpx;

          .icon {
            margin-right: 20rpx;
            border-radius: 50%;
            width: 55rpx;
            height: 55rpx;
            color: #000;
            background-color: #fff;
            text-align: center;
            line-height: 55rpx;
            box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(112, 112, 112, 0.3);
          }

          .content {
            flex: 1;
          }


          // 选项点击时
          &.hover {
            background: #e8e8e8;
          }

          // 多选题活动状态
          &.active {
            background-color: #e8e8e8;

            .icon {
              margin-right: 20rpx;
              border-radius: 50%;
              width: 55rpx;
              height: 55rpx;
              background-color: #fff;
              // color: #fff;
              text-align: center;
              line-height: 55rpx;
              box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(112, 112, 112, 0.3);
            }
          }

          // 正确的选项
          &.correct {
            color: #57c461;

            // 正确选项的图标
            .icon-circle-check-filled {
              display: inline-block;
              margin-right: 20rpx;
              font-size: 55rpx;
              line-height: 55rpx;
            }
          }

          // 错误的选项
          &.error {
            color: #f95150;

            // 错误选项的图标
            .icon-circle-close-filled {
              display: inline-block;
              margin-right: 20rpx;
              font-size: 55rpx;
              line-height: 55rpx;
            }

          }
        }

        &.yejianmoshi {
          .item {

            // 选项点击时
            &.hover {
              background: #222;
            }

            .icon {
              color: #000;
              background-color: #8e8b90;
            }

            &.active {
              background-color: #293530;
            }

            &.correct {
              color: #449c49;
            }

            &.error {
              color: #893d3f;
            }
          }
        }
      }


      // 答题-确认答案
      .answer-confirm {
        margin: 40rpx 0;
        align-self: center;
        width: 80%;
        height: 80rpx;
        background-color: #57c461;
        border-radius: 40rpx;
        color: #fff;
        font-size: 36rpx;
        text-align: center;
        line-height: 80rpx;

        &.yejianmoshi {
          color: #449c49;
          background-color: #293530;
        }
      }

      // 答题-结果
      .answer-result {
        display: flex;
        flex-direction: row;
        justify-content: start;
        margin-bottom: 40rpx;
        padding: 20rpx 10rpx;
        background-color: #f7f7f7;

        &.yejianmoshi {
          background-color: #222525;
        }

        &.huyanmoshi {
          background-color: #f4f2e0;
        }

        .answer-result-item {
          display: flex;
          align-items: center;
          margin-right: 20rpx;
          height: 54rpx;
          font-size: 32rpx;
          color: #121212;
          font-weight: bold;

          .answer-correct-label {
            &.yejianmoshi {
              color: #999;
            }
          }

          // 答题-试题答案
          .answer-correct-value {
            color: #57c461;

            &.yejianmoshi {
              color: #449c49;
            }
          }

          .answer-user-label {
            &.yejianmoshi {
              color: #999;
            }
          }

          // 答题-您选择的答案
          .answer-user-value {
            color: #ff3526;

            &.yejianmoshi {
              color: #893d3f;
            }
          }

        }

        // 答题-本地重做
        .answer-redo-container {
          display: flex;
          justify-content: flex-end;
          flex: 1;

          // 答题-重做按钮
          .answer-redo {
            right: 20rpx;
            width: 170rpx;
            height: 54rpx;
            color: #ffffff;
            background-color: rgb(253, 44, 63);
            line-height: 54rpx;
            text-align: center;
            font-size: 28rpx;
            border-radius: 27rpx;

            &.yejianmoshi {
              color: #999;
              background-color: #893d3f;
            }
          }
        }
      }
    }

    // 答题-技巧
    .answer-skill {
      padding: 8rpx 20rpx 40rpx;

      // 技巧-标题
      .answer-skill-title {
        display: flex;
        height: 100rpx;
        justify-content: space-between;
        align-items: center;

        // 技巧-标题-左边
        .answer-skill-title-left {
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 32rpx;

          &::before {
            content: '';
            margin-right: 20rpx;
            background: #57c461;
            display: inline-block;
            width: 6rpx;
            height: 30rpx;
          }

          .yejianmoshi &::before {
            background: #2c6035;
          }

        }

        // 技巧-标题-右边
        .answer-skill-title-right {
          display: flex;
          justify-content: flex-end;

          .sound-play-btn {
            display: inline-block;
            background-color: #e8f9ec;
            padding: 4rpx 16rpx;
            height: 36rpx;
            line-height: 36rpx;
            text-align: center;
            vertical-align: middle;
            color: #57c461;
            border-radius: 36rpx;

            // border: 2rpx solid #57c461;
            &.yejianmoshi {
              color: #449c49;
              background-color: #293530;
            }

            .btn-icon {
              position: relative;
              display: inline-block;
              padding-left: 4rpx;
              font-size: 36rpx;

              .btn-play {
                position: absolute;
                right: 0;
                top: 0;
                display: inline-block;
                width: 0rpx;
                height: 100%;
                background-color: #e8f9ec;
                animation-name: sound-play-animation;
                animation-duration: .5s;
                animation-iteration-count: infinite;

                &.yejianmoshi {
                  background-color: #293530;
                }
              }
            }

            .btn-txt {
              display: inline-block;
              padding-left: 4rpx;
              width: 80rpx;
              font-size: 20rpx;
              vertical-align: top;
            }
          }

        }
      }


      // 技巧-内容-解析
      .answer-skill-explain {
        padding: 20rpx 10rpx;
        background-color: #f7f7f7;

        &.yejianmoshi {
          background-color: #222525;
        }

        &.huyanmoshi {
          background-color: #f4f2e0;
        }

        .sound-play-btn {
          display: inline-block;
          // background-color: #e8f9ec ;
          margin-left: -40rpx;
          padding: 4rpx 16rpx;
          height: 36rpx;
          line-height: 36rpx;
          text-align: center;
          vertical-align: middle;
          color: rgb(92, 92, 92);
          border-radius: 36rpx;
          // border: 2rpx solid #57c461;

          .btn-icon {
            position: relative;
            display: inline-block;
            padding-left: 4rpx;
            font-size: 36rpx;

            &.yejianmoshi {
              color: #999;
            }

            .btn-play {
              position: absolute;
              right: 0;
              top: 0;
              display: inline-block;
              width: 0rpx;
              height: 100%;
              background-color: #f7f7f7;
              animation-name: sound-play-animation;
              animation-duration: .5s;
              animation-iteration-count: infinite;

              &.yejianmoshi {
                background-color: #222525;
              }
            }
          }

          .btn-txt {
            display: inline-block;
            padding-left: 4rpx;
            width: 80rpx;
            font-size: 20rpx;
            vertical-align: top;
          }
        }
      }

      // 技巧-适用于
      .answer-skill-sy {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 10rpx;
        font-size: 28rpx;
        color: rgb(92, 92, 92);

        // 技巧-适用于-试题数量
        .answer-skill-sy-count {
          color: #57c461;

          &.yejianmoshi {
            color: #449c49;
          }
        }

        // 技巧-适用于-右箭头图标
        .answer-skill-sy-icon {
          padding-top: 2rpx;
        }
      }
    }

    // 答题-视频讲题
    .answer-video-explain {
      display: flex;
      flex-direction: column;

      //答题-视频讲解-标题
      .answer-video-explain-title {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 100rpx;
        font-size: 32rpx;
        font-weight: bold;

        &::before {
          content: ' ';
          display: inline-block;
          width: 13rpx;
          height: 3rpx;
          background-color: #ccc;
          margin-right: 20rpx;
        }

        &::after {
          content: ' ';
          display: inline-block;
          width: 13rpx;
          height: 3rpx;
          background-color: #ccc;
          margin-left: 20rpx;
        }

        .yejianmoshi &::before,
        &::after {
          background-color: #999;
        }
      }

      // 答题-视频讲解-内容
      .answer-video-explain-content {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;


        // 答题-视频讲解-封面
        .answer-video-explain-cover {
          margin: 32rpx auto;
          width: calc(100% - 40rpx);
          background-color: skyblue
        }

        // 视频播放按钮
        .answer-video-play-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          background-color: rgba(0, 0, 0, .3);
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          color: #fff;
          font-size: 40rpx;

          &::before {
            margin-left: 10rpx;
          }
        }

      }

    }

    // 答题-题目解析
    .answer-topic-explain {
      padding: 8rpx 20rpx 0rpx;

      // 答题-题目解析-标题
      .answer-topic-explain-title {
        display: flex;
        height: 100rpx;
        align-items: center;

        // 答题-题目解析-标题-左边
        .answer-topic-explain-title-left {
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 32rpx;

          &::before {
            content: '';
            margin-right: 20rpx;
            background: #57c461;
            display: inline-block;
            width: 6rpx;
            height: 30rpx;
          }

          .yejianmoshi &::before {
            background: #2c6035;
          }
        }

        // 答题-题目解析-标题-右边
        .answer-topic-explain-title-right {
          display: flex;
          flex: 1;
          justify-content: flex-end;
        }
      }

    }

    // 答题-考点
    .answer-exam-points {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      margin: 10rpx 0rpx;
      padding: 0 20rpx;

      .answer-exam-point-label {
        margin-top: 8rpx;
        font-size: 24rpx;
        color: rgb(95, 95, 95);
        margin-right: 15rpx;
      }

      .answer-exam-point-item {
        margin-top: 8rpx;
        margin-right: 15rpx;
        padding: 0 15rpx;
        height: 40rpx;
        line-height: 40rpx;
        background-color: #f7f7f7;
        font-size: 24rpx;
        border-radius: 10rpx;

        &.yejianmoshi {
          background-color: #293530;
        }

        &.huyanmoshi {
          background-color: #f4f2e0;
        }
      }
    }

    // 答题-难度/错误率
    .answer-exam-infos {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0rpx 20rpx 40rpx;

      .label {
        font-size: 24rpx;
        color: rgb(95, 95, 95);
        margin-right: 15rpx;
      }

      .info-l {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      .info-r {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        margin-right: 10rpx;

        .rate {
          font-size: 24rpx;
        }
      }
    }

    // 答题-页面底部-控制留白
    .page-bottom {
      width: 100%;
      height: 40rpx;
    }

  }

  // 底部工具栏
  .toolbar {
    position: fixed;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10rpx;
    bottom: calc((var(--window-bottom)));
    z-index: 1;
    height: 150rpx;
    border-top: 1rpx solid #eaeaea;

    &.yejianmoshi {
      border-color: #222525;

      .left {
        .icon-item {
          .icon-star-filled {
            color: #999;
            text-shadow: 1px 1px 1px #999;

          }
        }

      }
    }

    &.huyanmoshi {
      border-color: #f4f2e0;

    }

    .left {
      display: flex;
      justify-content: space-around;

      .icon-item {
        display: flex;
        /* #ifdef MP-TOUTIAO */
        flex-direction: column;
        align-items: center;
        /* #endif */
        justify-content: start;
        align-items: center;

        margin-right: 10rpx;
        /* #ifndef MP-TOUTIAO */
        width: 120rpx;

        /* #endif */

        .icon {
          font-size: 32rpx;
        }

        .icon-star {
          color: #aaa;
        }

        .icon-star-filled {
          color: #f8e85b;
          text-shadow: 1px 1px 1px #f8e85b;


        }

        .txt {
          padding-left: 4rpx;
          line-height: 32rpx;
          font-size: 28rpx;

        }
      }
    }

    // 右侧部门
    .right {
      display: flex;
      justify-content: space-around;

      /* #ifdef MP-TOUTIAO */
      .toutiao-icon-item {
        display: flex;
        flex-direction: column;

        .icon-item {
          display: flex;
          flex-direction: row;

          .icon,
          .txt {
            font-size: 28rpx;
          }
        }
      }

      /* #endif */

      .icon-item {
        display: flex;
        /* #ifdef MP-TOUTIAO */
        flex-direction: column;
        align-items: center;
        /* #endif */
        justify-content: center;
        margin-right: 20rpx;

        .icon {
          font-size: 32rpx;
          color: #aaa;
        }

        .txt {
          padding-left: 4rpx;
          line-height: 32rpx;
          font-size: 28rpx;

          .count {
            color: #aaa;
          }
        }

        .correct {
          color: #57c461;

          &.yejianmoshi {
            color: #449c49
          }
        }

        .error {
          color: #fc484a;

          &.yejianmoshi {
            color: #893d3f
          }
        }
      }
    }

  }

  // 答题卡
  .answer-sheet {
    position: relative;

    //答题卡头部
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10rpx;
      border-bottom: 1rpx solid #eaeaea;
      height: 100rpx;
      color: #000;
      background-color: #fff;
      border-radius: 10px 10px 0 0;

      .left {
        display: flex;
        justify-content: space-around;

        .clear-btn {
          padding: 4rpx 20rpx;
          border: 2rpx solid #aaa;
          border-radius: 10rpx;
          font-size: 28rpx;
          color: #aaa;
          height: 48rpx;
          line-height: 40rpx;
          text-align: center;
          vertical-align: middle;
        }
      }

      // 右侧
      .right {
        display: flex;
        justify-content: space-around;

        .icon-item {
          display: flex;
          justify-content: center;
          margin-right: 20rpx;

          .icon {
            font-size: 32rpx;
            color: #aaa;
          }

          .txt {
            padding-left: 4rpx;
            line-height: 32rpx;
            font-size: 28rpx;

            .count {
              color: #aaa;
            }
          }

          .correct {
            color: #57c461
          }

          .error {
            color: #fc484a;
          }
        }
      }

    }

    // 答题卡内容
    .scroll-contaier {
      height: 65vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #fff;

      //试题序号容器
      .list {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 20rpx 8rpx;
        font-size: 28rpx;

        //试题序号
        .item {
          position: relative;
          margin: 14rpx 18rpx;
          border-radius: 50%;
          border: 4rpx solid #ccc;
          width: 86rpx;
          height: 86rpx;
          color: #aaa;
          text-align: center;
          line-height: 86rpx;

          &.correct {
            border-color: transparent;
            background-color: #ddffef;
            color: #57c461;
          }

          &.error {
            background-color: #fff3f5;
            color: #de696c;
            border-color: transparent;
          }

          &.active {
            &:not(.error) {
              border-color: #57c461;
            }

            &.error {
              border-color: #de696c;
            }
          }

          .new-role {
            position: absolute;
            left: -10rpx;
            bottom: -20rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 120%;
            height: 30rpx;
            font-size: 18rpx;
            color: #fff;
            background-color: #f87629;
            border-radius: 30rpx;
          }

          .locate {
            position: absolute;
            left: -10rpx;
            bottom: -20rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 120%;
            height: 30rpx;
            font-size: 18rpx;
            color: #fff;
            background-color: #9a81e0;
            border-radius: 30rpx;
          }


        }

      }
    }

    // 安全区域底部插入位置
    .bottom {
      background-color: #fff;
    }

    &.yejianmoshi {
      .header {
        background-color: #181b1d;
        border-color: #222;

        .left {
          .clear-btn {
            border-color: #999;
            color: #999;
          }
        }

        .right {
          .icon-item {
            .correct {
              color: #449c49
            }

            .error {
              color: #893d3f;
            }
          }
        }
      }

      .scroll-contaier {
        background-color: #181b1d;

        .item {
          &.correct {
            border-color: transparent;
            background-color: #192e24;
            color: #449c49;
          }

          &.error {
            background-color: #3f161d;
            color: #86484a;
            border-color: transparent;
          }

          &.active {
            &:not(.error) {
              border-color: #449c49;
            }

            &.error {
              border-color: #de696c;
            }
          }
        }
      }

      .bottom {
        background-color: #181b1d;
      }
    }

    &.huyanmoshi {
      .header {
        background-color: #f8f7ed;
      }

      .scroll-contaier {
        background-color: #f8f7ed;
      }
    }
  }

  // 灰色分割线
  .page-gray-border {
    height: 20rpx;
    width: 100vw;
    background-color: #f7f7f7;
    margin-top: 24rpx;

    &.yejianmoshi {
      background-color: #222525;
    }

    &.huyanmoshi {
      background-color: #f4f2e0;
    }
  }

  /* 声音播放动画 */
  @keyframes sound-play-animation {
    from {
      width: 18rpx;
    }

    to {
      width: 0rpx;
    }
  }
</style>
